<template>
  <div>
    <!-- 订单管理 -->
    <!-- 按钮上面的导航 -->
    <!-- <el-row style="margin: 18px 0px 0px 18px "> -->
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">管理中心</el-breadcrumb-item>
        <el-breadcrumb-item>财务管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>

    <!-- 搜索与添加按钮 -->
    <div style="margin-top: 15px; margin-left: 12px;">
       <el-select v-model="queryKey1" style="width: 150px;float:left;"  slot="prepend" placeholder="请选择支付状态">
          <el-option label="" value=""></el-option>
          <el-option label="已支付状态" value="1"></el-option>
          <el-option label="待支付状态" value="0"></el-option>
          <el-option label="已失效状态" value="2"></el-option>
        </el-select>
      <el-input
        style="width: 250px;float:left;"
        placeholder="请输入课程产品名称"
        suffix-icon="el-icon-date"
        v-model="queryKey2"
        clearable
      ></el-input>
      <el-input
        placeholder="请输入订单编号"
        v-model="queryKey3"
        style="width: 250px;float:left;"
        clearable
      >
      </el-input>
       <el-button style="float:left;" type="primary" @click="loadCourse()" icon="el-icon-search" >搜索</el-button>

    </div>

    <el-button class="add-button" style="float:left;" type="primary" icon="el-icon-refresh" @click="loadCourse1()" >刷新</el-button>

    <el-card style="margin: 15px 1%;width: 98%">
      <el-table :data="data" border style="width: 100%" :max-height="tableHeight">

        <el-table-column prop="orderId" label="订单号" fit></el-table-column>
        <el-table-column prop="productId" width="120"  label="产品主键ID" fit></el-table-column>
        <el-table-column prop="productName" label="产品名称" fit></el-table-column>
        <el-table-column prop="orderAmount" label="订单金额" width="110" sortable fit></el-table-column>
        <el-table-column  label="实际支付金额(元)" fit>
           <template slot-scope="scope">
            <div v-if="scope.row.payAmount === '' || scope.row.payAmount === null ">
              <el-tag>未支付</el-tag>
            </div>
            <div v-else>
              <el-tag>¥{{scope.row.payAmount}}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="100"  fit></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>

         <!-- 订单失效倒计时 -->
        <el-table-column width="120" label="失效时间">
           <template slot-scope="scopes">
            <div v-if="scopes.row.orderStatus === 2">
              <div class="count-down" style="border:1px solid #FF0000;">
                <daojishi  class="surplus" :endTime="scopes.row.endTime" :callback="callback" endText="订单已过期"></daojishi>
              </div>
            </div>
            <div v-if="scopes.row.orderStatus === 0">
              <div class="count-down" style="border:1px solid #FF0000;">
                <daojishi  class="surplus" :endTime="scopes.row.endTime" :callback="callback" endText="订单已过期"></daojishi>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="订单状态" width="120">

          <template slot-scope="scope">
            <div v-if="scope.row.orderStatus === 0">
               <!-- ali支付 -->
              <el-button
                @click="alipay(scope.row.id)"
                type="primary"
                size="small"
                round
              >线上支付</el-button>
              <div v-if="username === 'admin'">
              <el-button
                @click="xianjinpay(scope.row.id)"
                type="primary"
                size="small"
                round
              >现金支付</el-button>
            </div>
            </div>

            <div v-if="scope.row.orderStatus === 1">
              <el-tag type="success">支付成功</el-tag>
            </div>

            <div v-if="scope.row.orderStatus === 2">
              <el-tag type="danger">订单已过期</el-tag>
            </div>

            <div v-if="scope.row.orderStatus === 3">
              <el-tag type="warning">订单已退款</el-tag>
            </div>

            <div v-if="scope.row.orderStatus === 4">
              <el-tag type="warning">退款失败</el-tag>
            </div>

          </template>
        </el-table-column>

      </el-table>
      <div style="margin: 20px 0 50px 0">
        <el-pagination
          background
          style="float:right;"
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import Daojishi from './daojishi.vue'

export default {
  inject: ['reload'], // 注入依赖   Vue项目中刷新当前页面
  name: 'Order',
  // 引入之后
   components: { Daojishi },
  data () {
    return {
      data: [],
      username: this.$store.state.username,
      queryKey1: '',
      queryKey2: '',
      queryKey3: '',
      pageSize: 10,
      OrderPayStatus: '', // 订单是否失效
      orderTime: '', // 订单倒计时
      total: 0
    }
  },
  mounted () {
    this.loadCourse()
    // this.OnStartCountdown()
  },
  computed: {
    tableHeight () {
      // table  card的高度
      return window.innerHeight - 300
    }
  },
  methods: {
    alipay (id) {
      window.open('http://localhost:8090/api/alipay?id=' + id, '_blank', 'width=1100,height=700,top=30px,left=80px')
    },
    xianjinpay (id) {
      var _this = this
      this.$axios.post('/admin/xianjinpay/' + id).then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.data = resp.data.result
          this.$alert(resp.data.message, '提示', {
          type: 'success',
          dangerouslyUseHTMLString: true
          })
          this.loadCourse()
        } else {
          // 从后端返回错误信息
              this.$alert(resp.data.message, '错误提示', {
              type: 'error',
              dangerouslyUseHTMLString: true
              })
        }
      })
    },
    loadCourse1 () {
       // 刷新清空搜索框的值
      // eslint-disable-next-line no-unused-expressions
      this.queryKey1 = ''
      this.queryKey2 = ''
      this.queryKey3 = ''
      this.reload() // Vue项目中刷新当前页面
    },
    loadCourse () {
      var _this = this
      this.$axios.post('/admin/order/' + this.pageSize + '/1?queryKey1=' + this.queryKey1 +
              '&queryKey2=' + this.queryKey2 + '&queryKey3=' + this.queryKey3).then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.data = resp.data.result.content
          _this.total = resp.data.result.totalElements
        } else {
          // 从后端返回错误信息
              this.$alert(resp.data.message, '错误提示', {
              type: 'error',
              dangerouslyUseHTMLString: true
              })
        }
      })
    },
    handleCurrentChange (page) {
      var _this = this
      this.$axios.post('/admin/order/' + this.pageSize + '/' + page + '?queryKey1=' + this.queryKey1 +
              '&queryKey2=' + this.queryKey2 + '&queryKey3=' + this.queryKey3).then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.data = resp.data.result.content
          _this.total = resp.data.result.totalElements
        } else {
              // 从后端返回错误信息
              this.$alert(resp.data.message, '错误提示', {
              type: 'error',
              dangerouslyUseHTMLString: true
              })
        }
      })
    },
    callback () {

    }
  }
}
</script>

<style scoped>
.add-link {
  margin: 18px 0 15px 10px;
  float: left;
}
.add-button {
     margin: 0px 0 20px 15px;
  }
  .surplus {
    background-color: #fff;
    border-top-right-radius: px2rem(4);
    border-bottom-right-radius: px2rem(4);
    border: px2rem(1) solid #d81e06;
    color: #d81e06;
    display: inline-block;
    padding: px2rem(2) px2rem(4);
  }
</style>
